<template>
<div id="aaa">
  <button type="button" @click="toLeft()"><</button>
  <button type="button" @click="toRight()">></button>
  <br />
  <img :src="imgs[index]" />
</div>
</template>

<script>
export default {
  name: "showImg",
  data(){
    return {
      imgs: ["../../static/img/111.jpg", "../../static/img/222.jpg", "../../static/img/333.jpg", "../../static/img/444.jpg"],
      index: 0
    }
  },
  methods:{
    "toLeft":function(){
      this.index--;
      if(this.index<0){
        this.index=this.imgs.length-1
      }
    },
    "toRight":function(){
      this.index++;
      if(this.index>this.imgs.length-1){
        this.index=0;
      }
    }
  }
}
</script>

<style scoped>

</style>
